<%@ page import="com.MusicWeb.entity.User" %><%--
  Created by IntelliJ IDEA.
  User: 小超
  Date: 2021/4/6
  Time: 15:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>短消息</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        text-decoration: none;
        color: black;
    }

    #index-Center {
        width: 1000px;
        height: 600px ;
        background-color: white;
        margin: 0 auto;
        border: 3px solid #716e72;
        opacity: 0.9;
        border-radius: 0 0 15px 15px;
    }

    #tables {
        width: 960px;
        margin: 0 auto;
    }

    #tables th {
        width: 25%;
        background-color: #beb8ca;
    }

    #tables td {
        text-align: center;
    }

    /*查看回复内容*/

    #ReplyContent {
        width: 500px;
        height: 430px;
        left: 550px;
        display: none;
        position: absolute;
        border: 3px solid #716e72;
        background-color: #a6a6af;
    }

    .content {
        width: 450px;
        height: 350px;
        margin: 0 auto;
        background-color: white;
    }

    h2 {
        padding: 20px;
        display: inline-block;
    }

    #ReplyContent {
        position: absolute;
        top: 150px;
        left: 450px;
    }

    #ReplyContent a {
        float: right;
        margin: 20px;
        color: black;
    }

    #ReplyContent input {
        width: 280px;
        cursor: pointer;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 28px;
        line-height: 28px;
        outline: none;
        padding: 0 15px;
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    }

    .MusicTitle {
        width: 280px;
        border: none;

        outline: medium;
    }

</style>
<%--通用代码，每个页面都引入--%>
<%@include file="../components/header.jsp" %>
<%@ include file="../components/base.jsp" %>
<body style="background-color: #cccccc">
<%--短消息--%>
<div id="index-Center">

    <%
        User user = (User) request.getSession().getAttribute("user");
        Integer u_id = user.getId();
    %>

    <input id="user" type="text" value="<%= u_id %>" style="display: none">

    <h1 style="padding: 20px;">我的短消息</h1>
    <table id="tables">

    </table>

    <%--    内容--%>
    <div id="ReplyContent">

    </div>

</div>
</body>
<script>


    let list = [];
    var userID = $('#user').val();


    // 显示回复信息
    function userReply() {
        $.ajax({
            type: "GET",
            url: `http://localhost:8080/tip?id=${userID}`,
            dataType: "json",
            success: function (res) {
                list = res;
                if (res != null) {
                    $(`#tables`).html(`
                    <tr>
                        <th>发件人</th>
                        <th>时间</th>
                        <th>标题</th>
                        <th>操作</th>
                    </tr>
                    `);
                    for (var i = 0; i < list.length; i++) {
                        $(`#tables`).append(`
                            <tr>
                                <td>${list[i].name}</td>
                                <td>${list[i].date}</td>
                                <td onclick="ReplyContentAdd(${list[i].id})">${list[i].title}</td>
                                <td><a href="" onclick="delReply(${list[i].id})">删除</a></td>
                            </tr>`)
                    }
                    console.log(list);
                }
            }
        });
    }

    userReply();


    // 显示回复内容
    function ReplyContent(id) {

        for (let i = 0; i < list.length; i++) {
            if (list[i].id === id) {
                $('#ReplyContent').html(`
                        <h2>来自：</h2>
                        <input class ="MusicTitle" type="text" value="${list[i].music_name}">
                        <a href="javascript:void(0)" onclick="ReplyContentANo()">退出</a>
                        <h3>标题：${list[i].title}</h3>
                        <div class="content">
                            ${list[i].text}
                        </div>
                    `)
            }
        }
    }


    function ReplyContentAdd(id) {
        $('#ReplyContent').css('display', 'block');
        ReplyContent(id);
    }

    function ReplyContentANo() {
        $('#ReplyContent').css('display', 'none');
    }


    // 删除消息
    function delReply(mid) {
        $.ajax({
            type: "GET",
            url: `http://localhost:8080/tipdel?uid=${mid}`,
            dataType: "json",
            success: function (res) {
                userReply();
            }
        })
    }
</script>
</html>
